<template>
	<view>
		<uni-list>
			<!-- 第一个商品开始 -->
			<uni-list-item ellipsis="2" clickable v-for="(p,i) in products" :key="i"   link="navigateTo" :to="`/pages/productDetails/productDetails?lid=${p.lid}`" >
				<view class="header" slot="header">
					<image :src="$base+p.pic" mode="widthFix"></image>
				</view>
				<view class="body" slot="body">
					<view class="top">
						<text>{{p.title}}</text>
					</view>
					<view class="middle">
						<text>¥{{p.price}}</text>
					</view>
					<view class="bottom">
						<uni-tag text="促销" type="error" v-if="p.spec">5000"></uni-tag>
						<text>销量:{{p.spec}}，好评率100%</text>
					</view>
				</view>
			</uni-list-item>
			<!-- 第一个商品结束			 -->
			<uni-load-more :status="isLoading?'loading':(hasMore?'More':'noMore')" />
		</uni-list>
	</view>
</template>
<script>
	import {
		productlist
	} from "@/service/index.js"
	export default {
		data() {
			return {
				products: [], //要查询到的商品关键字
				kw: '', //查到的商品数据
				pno: 0, //页号
				isLoading: false, //当前是否正在加载下一页数据
				hasMore: true, //是否还有更多

			}
		},
		onLoad(data) {
			// console.log(data);
			if (data.fid) {
				this.kw = data.fid
			}
			this.loadNextPageData() //1.页面加载完成时加载下一页数据
		},
		async onPullDownRefresh() {
			// console.log('下拉刷新');
			this.pno = 1
			this.products = []
			this.hasMore = true
			await this.loadNextPageData() //开始加载下一页数据--调用情形3.顶部下拉刷新
			//等到新数据加载完成，隐藏掉’加载中‘动画
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// console.log('到底了');
			this.loadNextPageData() //触底加载下一页
		},
		methods: {
			//加载下一页数据 1.页面加载完成时  2.滚动到页面底部  3.顶部下拉刷新
			async loadNextPageData() {
				if (!this.hasMore || this.isLoading) {
					return //如果“没有更多数据”或者“当前正在加载”，就不要加载
				}
				//开始加载下一页数据
				this.isLoading = true //开始加载...
				let pno = this.pno + 1
				let res = await productlist(pno, this.kw)
				// console.log(res.pno)
				if (res.data.length > 0) {
					this.products = [...this.products, ...res.data]
				}
				// ************************************************************
				if (res.pno < res.sumpage) { //当前页数小于总页数
					this.hasMore = true //还有更多数据
					this.pno = res.pno
				} else { //当前页号大于或等于总页数
					this.hasMore = false
					this.pno = res.pno
					uni.showToast({
						title: '没有数据啦',
						icon: "none"
					})
				}
				this.isLoading = false //加载结束
			}
		}
	}
</script>





<style lang="scss">
	.header {
		image {
			width: 150rpx;
			margin-left: -15rpx;
			margin-top: -10rpx;
			margin-bottom: -10rpx;
			margin-right: 15rpx;
		}
	}

	.body {
		.top {
			// 文本显示两行,溢出部分显示为省略号
			overflow: hidden;
			text-overflow: ellipsis;
			// word-break:break-all;  自动换行
			display: -webkit-box; //显示模型：webkit-box模型
			-webkit-line-clamp: 2; //要想显示的行数
			-webkit-box-orient: vertical; //多行如何排列  ：竖直  pc端不支持-webkit
		}

		.middle {
			color: #0aa1ed;
		}

		.bottom {
			color: #666;
			font-size: 14px;
			margin-top: 10rpx;
			overflow: hidden;
			white-space: nowrap;
		}
	}
</style>
